<template>
  <div class="revise">
    <div class="commit">
      <input type="text" v-model.trim="introduction" ref="text" v-show="false" />
      <div
        class="editor"
        contenteditable="true"
        ref="editor"
        placeholder="默认文字"
        @focus="eFocus()"
        @input.prevent="eInput()"
        @keypress.prevent
      ></div>
      <span class="emot" @click="emot()" @mousedown.stop.prevent></span>
      <VEmojiPicker v-show="isEmojiPicker" :pack="pack" @select="selectEmoji" />
    </div>
  </div>
</template>
<script>
import VEmojiPicker from "v-emoji-picker";
import packData from "v-emoji-picker/data/emojis.json";
export default {
  name: "revise",
  components: {
    VEmojiPicker
  },
  data() {
    return {
      pack: packData.data,
      isEmojiPicker: false,
      introduction: ""
    };
  },
  methods: {
    eInput() {
      this.introduction = this.$refs.editor.innerHTML;
    },
    eFocus() {
      // this.$refs.text.focus();
    },
    emot() {
      this.$refs.editor.focus();
      this.isEmojiPicker = !this.isEmojiPicker;
    },
    // getSelection、createRange兼容
    isSupportRange() {
      return (
        typeof document.createRange === "function" ||
        typeof window.getSelection === "function"
      );
    },
    // 插入内容
    insertHtmlAfterRange(html) {
      let selection = null;
      let range = null;
      if (this.isSupportRange()) {
        // IE > 9 and 其它浏览器
        selection = document.getSelection();
        if (selection.getRangeAt && selection.rangeCount) {
          let fragment, node, lastNode;
          range = selection.getRangeAt(0);
          range.deleteContents();
          let el = document.createElement("span");
          el.innerHTML = html;
          // 创建空文档对象,IE > 8支持documentFragment
          fragment = document.createDocumentFragment();

          while ((node = el.firstChild)) {
            lastNode = fragment.appendChild(node);
          }
          range.insertNode(fragment);

          if (lastNode) {
            range = range.cloneRange();
            range.setStartAfter(lastNode);
            range.collapse(true);
            selection.removeAllRanges();
            selection.addRange(range);
          }
        }
      } else if (document.selection && document.selection.type != "Control") {
        // IE < 9
        document.selection.createRange().pasteHTML(html);
      }
    },
    selectEmoji(emoji) {
      var elInput = this.$refs.text; //根据id选择器选中对象
      var startPos = elInput.selectionStart; // input 第0个字符到选中的字符
      var endPos = elInput.selectionEnd; // 选中的字符到最后的字符

      if (startPos === undefined || endPos === undefined) return;
      var txt = elInput.value;
      // 将表情添加到选中的光标位置
      var result =
        txt.substring(0, startPos) + emoji.emoji + txt.substring(endPos);
      elInput.value = result; // 赋值给input的value
      // 重新定义光标位置
      elInput.focus();
      elInput.selectionStart = startPos + emoji.emoji.length;
      elInput.selectionEnd = startPos + emoji.emoji.length;
      this.introduction = result; // 赋值给表单中的的字段
      this.$refs.editor.innerHTML = result;
    }
  }
};
</script>
<style lang="scss">
.revise {
  #InputSearch {
    display: none;
  }
  .container-emoji {
    height: 130px;
  }
}
</style>
<style lang="scss" scoped>
.revise {
  .commit {
    // placeholder 样式
    [contenteditable="true"]:empty::before {
      content: attr(placeholder);
      color: #ccc;
      caret-color: #ccc;
    }
    span.emot {
      display: inline-block;
      vertical-align: middle;
      background: url(../images/b8d.png) no-repeat;
      background-size: 100% 100%;
      width: 20px;
      height: 20px;
      margin: 0 10px;
    }
    .editor {
      width: 80%;
      display: inline-block;
      vertical-align: middle;
      margin: auto;
      line-height: 30px;
      font-size: 18px;
      resize: none;
      overflow-y: auto;
      max-height: 90px;
      text-align: left;
      padding: 0;
    }
  }
}
</style>